<%--
  Created by IntelliJ IDEA.
  User: Mucd
  Date: 2021/6/25
  Time: 15:09
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>数据展示&&管理</title>
    <script src="<c:url value="static/jquery-1.8.3.js"/>"></script>
    <link rel="stylesheet" href="<c:url value="static/layui/css/layui.css"/>">
    <script src="<c:url value="static/layui/layui.js"/>"></script>
    <style>
        .layui-container {
            width: 1330px !important;
        }

        .h1txt {
            text-align: center;
        }

        .layui-laypage .layui-laypage-curr .layui-laypage-em {
            background-color: rgba(255, 255, 255, 0) !important;
        }
    </style>
</head>
<body>

<div class="layui-container">
    <form action="" id="mainForm">
        <h1 class="h1txt">欢迎<span class="layui-anim layui-anim-downbit">${sessionScope.user}</span>使用</h1>
        <input type="text" class="layui-input" id="likeName" placeholder="搜索数据" name="likeName"><br>
        <div class="layui-anim layui-anim-up">
            <br>
            <button onclick="commitLikeName()" class="layui-btn btn-warning"> 搜索数据</button>
            <a href="insert.jsp" class="layui-btn layui-btn-danger">去添加数据</a>
            <a href="javascript:deleteBatch()" class="layui-btn layui-btn-danger">删除选中数据</a>
        </div>

        <table  class="layui-table" lay-event lay-skin="line" lay-size="lg">
            <colgroup>
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th><input type="checkbox" id="chexkbox" onclick="check()"></th>
                <th>count</th>
                <th>id</th>
                <th>name</th>
                <th>gender</th>
                <th>age</th>
                <th>address</th>
                <th>qq</th>
                <th>email</th>
                <th>update</th>
                <th>del</th>
            </tr>
            </thead>
            <tbody class=layui-anim" data-anim="layui-anim-down">
            <c:forEach var="person" items="${sessionScope.page}" varStatus="vs">
                <div class="layui-anim layui-anim-up">
                    <tr>
                        <td><input type="checkbox" class="bchk" name="batchId" layui-skin="primary"
                                   value="${person.id}">
                        </td>
                        <td>${vs.count}</td>
                        <td>${person.id}</td>
                        <td>${person.name}</td>
                        <td>${person.gender}</td>
                        <td>${person.age}</td>
                        <td>${person.address}</td>
                        <td>${person.qq}</td>
                        <td>${person.email}</td>
                        <td><a class="layui-btn layui-btn-warm layui-btn-sm"
                               href="${pageContext.request.contextPath}/update.jsp?id=${person.id}">修改</a></td>
                        <td><a id="del" class="layui-btn layui-btn-danger layui-btn-sm"
                               href="${pageContext.request.contextPath}/Delete?id=${person.id}" onclick="del()">删除</a>
                        </td>
                    </tr>
                </div>
            </c:forEach>
            </tbody>
        </table>


        <%--页码--%>
        <div id="pages">
            <c:forEach var="page" begin="1" end="${sessionScope.countSize}" step="1">
                <span> <a class="layui-btn layui-this layui-btn-primary  layui-btn-sm" href="limit?page=${page}">${page}页</a></span>
            </c:forEach>
        </div>
    </form>
</div>

<%--是否确定删除--%>
<script>
    function del() {
        let b = confirm("确定删除吗?删了就没了喔!!!")
        if (b !== true) {
            event.preventDefault();
        }

    }
</script>
<%--批量删除 && 查找数据--%>
<script>
    /**
     * jQuery采用一种非常简洁的语法来获取HTML元素——$()，它是一个特殊的函数
     * $()返回对象所有的方法，例如$().css()与$().height()既是getter也是setter
     * jQuery 对 AJAX(Asynchronous JavaScript and XML) 有良好的支持,它是$的一个属性：$.AJAX
     */

    /**
     * 调用后台批量删除方法
     */
    function deleteBatch() {
        //获取选中的个数
        console.log($('input[type=checkbox]:checked').size())
        if ($('input[type=checkbox]:checked').size() > 0) {
            $('#mainForm').attr("action", "${pageContext.request.contextPath}/delBatch");
            $('#mainForm').submit();
            layui.use('layer', function () {
                var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
                //loading层

                /*            var index = layer.load(1, {
                                shade: [0.1, '#fff'] //0.1透明度的白色背景
                            });*/
                //小tips
                layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', {
                    tips: [1, '#3595CC'],
                    time: 4000
                });
            })

            /**
             * 剧毒。。写成 $(mainForm) 调试了超久
             */
        } else {
            alert("请选中要删除的 Message ");
        }
    }

    /*搜索数据框失去焦点*/
    function commitLikeName() {
        layui.use('layer', function () {
            var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
            //loading层
            //小tips
            layer.tips('正在加载。', '吸附元素选择器', {
                tips: [1, '#3595CC'],
                time: 4000
            });
        })
        console.log("执行了此函数")
        let $likeName = $('#likeName');


        $('#mainForm').attr("action", "${pageContext.request.contextPath}/likeSelect").submit();
    }
</script>
<%--设置复选框--%>
<script>
    let arr = [];

    function check() {
        let chexkbox = document.getElementById("chexkbox");
        let bchk = document.getElementsByClassName('bchk');
        if (chexkbox.checked === true) {
            for (let i = 0; i < bchk.length; i++) {
                bchk[i].checked = true;
                if (bchk[i].checked === true) {
                    arr.push(bchk[i]);
                }
            }
        } else {
            for (let i = 0; i < bchk.length; i++) {
                bchk[i].checked = false;
            }
        }
    }

</script>
</body>
</html>
